<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>


</head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/static/css/index.css">
<style>
    body {
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
</style>

</head>

<body>
    <div id="app">

        <el-container>
            <el-header title="顶栏">
                <el-row :gutter='20'>
                    <el-col :span="4" style="text-align: center;">
                        <img src="/static/images/logo.png" alt="" width="100px">
                        <h1 style="display: inline;">Blogo</h1>
                    </el-col>
                    <el-col :span="16" style="line-height: 63px;">
                        <el-input v-model="input" placeholder="请输入想查询的内容"></el-input>
                    </el-col>
                    <el-col :span="4" style="line-height: 63px; text-align: center;">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                ${user.user_nick}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click="jumpFront">返回前台</el-dropdown-item>
                                <el-dropdown-item @click="jumpNewPost">发布博客</el-dropdown-item>
                                <el-dropdown-item @click="signout" divided>注销</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
                <div class="line"></div>

            </el-header>

            <el-container style="margin-top: 40px;">
                <el-aside width="fit-content" title="侧导航栏" style="margin-top: 20px;">
                    <!-- <div v-if="isCollapse">
                    <el-button icon="el-icon-s-fold" @click="handleCollapse"></el-button>
                    </div>
                    <div v-else>
                        <el-button icon="el-icon-s-unfold" @click="handleCollapse"></el-button>
                    </div> -->  
                    <el-switch style="margin-left:22px;margin-bottom: 10px;" v-model="isCollapse" active-color="#13ce66"></el-switch>

                    <el-menu default-active="2-1" class="el-menu-vertical-demo" @open="handleOpen"
                        @close="handleClose" :collapse="isCollapse">
                        <el-menu-item index="1" @click="jumpFront">

                            <i class="el-icon-s-home"></i>
                            <span slot="title">前台</span>

                        </el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1" @click="jumpContentManage">内容管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-container>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{path: '/'}"><a href="/blogo/dashboard/page">首页</a></el-breadcrumb-item>
                            <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                        </el-breadcrumb>
                        <el-main title="操作内容">
                            <template>
                                <el-table :data="tableData" border style="width: 100%">
                                    <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
                                    </el-table-column>
                                    <el-table-column pro-table-column prop="title" label="标题" width="120">
                                    </el-table-column>
                                    <el-table-column pro-table-column prop="update_time" label="修改时间" width="120">
                                    </el-table-column>
                                    <el-table-column pro-table-column prop="author" label="作者" width="120">
                                    </el-table-column>
                                    <el-table-column pro-table-column prop="likes" label="点赞次数" width="120">
                                    </el-table-column>
                                    <el-table-column pro-table-column prop="views" label="查看次数" width="120">
                                    </el-table-column>
                                    <el-table-column pro-table-column prop="category" label="分类" width="120">
                                    </el-table-column>
                                    <el-table-column pro-table-column prop="tags" label="标签" width="120">
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作" width="200">
                                        <template slot-scope="scope">
                                            <el-button @click="view(scope.row)" type="text" size="small">查看
                                            </el-button>
                                            <el-button type="text" size="small">编辑</el-button>
                                            <el-button type="text" size="small" @click="delete(scope.row)">删除</el-button>
                                        </template>


                                    </el-table-column>

                                </el-table>

                            </template>                               


                            

                        </el-main>
                        <el-footer>
                            <template>
                                <el-pagination @current-change="hanldeCurrentChange" background :page-size="page_size" layout="prev, pager, next"
                                    :total="total">
                                </el-pagination>
                            </template>
                        </el-footer>

                    </el-container>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- <div id="editor"></div> -->




</body>
<!-- <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script> -->
<!-- import Vue before Element -->
<script src="/static/js/Vue.js"></script>
<!-- import JavaScript -->
<script src="/static/js/index.js"></script>
<script src="/static/js/marked.min.js"></script>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script>

    let Main = new Vue({
        el: "#app",
        delimiters: ['${', '}'],
        data: {
            isCollapse: false,
            input: "",
            user: {
                user_nick: "Liang Chao"
            },
            tableData: [{
                id: "1",
                date: '2016-05-02',
                title: "发i飞机",
                update_time: "2021-11-9",
                author: "Liang Chao",
                likes: 1,
                views: 100,
                category: "GO",
                tags: "tag1, tag2",
                content: "",
            }],
            total: 100,
            page_size: 10,
        },
        methods: {
            handleOpen(key, keyPath) {
                // alert(key, keyPath)
            },
            handleClose(key, keyPaht) {
                // alert(key, keyPath)
            },
            handleClick(row) {
                console.log(row)
            },
            jumpFront() {
                location.href = "/blogo/blog/page"
            },
            jumpContentManage() {
                let token = localStorage.getItem("token")
                location.href = `/blogo/dashboard/content-manage?token=${token}`
            },
            signout() {
                /*设置token失效*/
                localStorage.setItem("token", null)
                location.href = `/blogo/login/page`
            },
            transferTableData(blogs) {
                let tableData = []
                blogs.forEach((item) => {
                    let row = {
                        id: item.blog_id,
                        date: item.create_time,
                        title: item.blog_title,
                        update_time: item.update_time,
                        author: item.author_name,
                        likes: item.blog_likes,
                        views: item.blog_views,
                        category: "GO",
                        tags: "tag1, tag2",
                        content: item.blog_content,
                    }
                    tableData.push(row)
                })
                return tableData
            },
            getBlogs(page, page_size) {
                let tableData = []
                let total 
                $.ajax({
                    url: `/blogo/blog/query/${page}/${page_size}`,
                    async: false,
                    type: "get",
                    dataType: "json",
                    success: (res) => {
                        tableData = this.transferTableData(res.data.blogs)
                        total = res.data.total
                    }
                })
                this.tableData = tableData
                this.total = total

            },
            goBack() {
                let token = localStorage.getItem("token")
                location.href = `/blogo/dashboard/page?token=${token}`
            },
            hanldeCurrentChange(val) {
                getBlogs(val, this.page_size) // flush blog table
            },
            handleCollapse(){
                console.log("hhhh")
                this.isCollapse = this.isCollapse === true ? false : true
            },
            jumpNewPost(){
                let token = localStorage.getItem("token")
                location.href=`/blogo/blog/edit/page?token=${token}`
                return
            },
            delete(row){
                let id = row.id
                let count = 0
                let successM = this.$message.success
                let errorM = this.$message.error
                let token = localStorage.getItem("token")
                this.$confirm("此操作将永久删除这篇博客，是否继续", "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    $.ajax({
                        url: `/blogo/blog/delete?id=${id}&token=${token}`,
                        type: "delete",
                        async: false,
                        success: (res) => {
                            if(res !== null && res.code === 200) {
                                successM(`已删除${count}行`)
                            }
                        },
                    })
                    this.getBlogs(this.page, this.pagesize)
                }).catch(()=>{
                    error("删除失败")
                })
            },
            view(row){
                let content = marked(row.content)
                let title = row.title
                this.$comfirm(content, title, {
                    confirmButtonText: '编辑',
                    cancelButtonText: '返回'
                }).then(()=>{
                    /*
                    * 跳转到编辑页面
                    * */
                })
            }
        },
        created: function () {
            this.getBlogs(1, this.page_size) // 获取
        }
    })
</script>

</html>